@import 'breakpoints';
@import 'media';

$grid-gutter-width: 30px; //переменна переопределена после удаления bootstrap
$grid-columns: 12; //переменна переопределена после удаления bootstrap
$grid-row-columns: 12; //переменна переопределена после удаления bootstrap

@mixin make-row($gutter: $grid-gutter-width) {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$space-x3;
  margin-left: -$space-x3;
}

@mixin make-col-ready($gutter: $grid-gutter-width) {
  position: relative;
  width: 100%;
  padding-right: $space-x3;
  padding-left: $space-x3;
}

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  max-width: percentage($size / $columns);
}

@mixin make-col-auto() {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  $num: $size / $columns;
  margin-left: if($num == 0, 0, percentage($num));
}

@mixin row-cols($count) {
  & > * {
    flex: 0 0 100% / $count;
    max-width: 100% / $count;
  }
}

@mixin make-grid-columns(
  $columns: $grid-columns,
  $gutter: $grid-gutter-width,
  $breakpoints: $grid-breakpoints
) {
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $space-x3;
    padding-left: $space-x3;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }
    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-up-breakpoint($breakpoint) {
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      @for $i from 1 through $grid-row-columns {
        .row-cols#{$infix}-#{$i} {
          @include row-cols($i);
        }
      }

      .col#{$infix}-auto {
        @include make-col-auto();
      }

      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      .order#{$infix}-first {
        order: -1;
      }

      .order#{$infix}-last {
        order: $columns + 1;
      }

      @for $i from 0 through $columns {
        .order#{$infix}-#{$i} {
          order: $i;
        }
      }

      @for $i from 0 through ($columns - 1) {
        @if not($infix == '' and $i == 0) {
          .offset#{$infix}-#{$i} {
            @include make-col-offset($i, $columns);
          }
        }
      }
    }
  }
}
